<template>
	<div class="login">
		<!-- 遮罩层 -->
		<Modal 
			@toggle="toggle"
			:showModal="showModal"
		></Modal>
		<!-- 分享部分 -->
		<Share @share="share"></Share>
		<!-- 公共部分 -->
		<Common
			ref = "common"
			:showOrHide="showOrHide"
			@setImg = "setImg"
			@readURL = "readURL"
			@toRigster = "toRigster"
			@submit = "submit"
		>	
		</Common>
	</div>
</template>

<script type="text/javascript">
// eslint-disable-next-line
/* eslint-disable */
import Common from "../components/common.vue"
import Share from "../components/share.vue"
import Modal from "../components/Modal.vue"
import {mixin} from "../mixin.js"
import QRCode from "qrcodejs2"
import { MessageBox } from 'mint-ui'
import form from '../../common/js/form.js'
import storage from "../../common/js/localStorage.js"
export default {
	mixins: [mixin],
	name: 'login',
	components:{
		Common,
		Share,
		Modal
	},
	data() {
		return {
			showOrHide: true,
			showModal: false
		}
	},
	methods: {
		toRigster() {
			this.$router.push({
				name: 'register',
			})
		},
		submit(username,password) {
			var username = username.trim()
			var password = password.trim()
			// 检测name
			if(!username){
				MessageBox("","请输入昵称")
				return ;
			}
			// 检测pass
			if(!password){
				MessageBox("","请输入密码")
				return ;
			}
           	api.login({
           		user_name: username,
           		user_pass: password
           	}).then(res=>{
           		if(res.code===0){
           			// 写入缓存
					
					storage(res);
           			MessageBox("",res.message).then(action=>{
           				this.$router.push({
							name: 'addinfo',
						})
           			})
           		}
           	}).catch(res=>{
           		if(res.code===1001){
           			MessageBox("",res.message).then(res=>{
           				this.$refs.common.$refs.username.value = ""
           				this.$refs.common.$refs.password.value = ""
           			});
           		}
           	})

			
		},
		share() {
			console.log("share")
			this.showModal = true;
			this.hidden("hidden")
			// 每次都要清空
			this.clear()
			this.qrCode(location.href)
		},
		qrCode (url) {
            let qrcode = new QRCode("qrcode", {
                width: 250, //图像宽度
                height: 250, //图像高度
                colorDark : "#000", //前景色
                colorLight : "#fff", //背景色
                typeNumber:4, 
                correctLevel : QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
            })
            qrcode.clear() //清除二维码 
            qrcode.makeCode(url) //生成另一个新的二维码
        },
        toggle() {
        	this.showModal = false;
        	this.hidden("");
        },
        // hidden
        hidden(str) {
        	document.body.className = str
        },
        // clear
        clear() {
        	document.getElementById('qrcode').innerHTML = "";
        }
	}
}
</script>

<style lang="scss" scoped>
@import "../../public/sass/var.scss";

</style>